<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
  <!-- 工作原理（结合 vite-plugin-svg-icons） 
在项目构建阶段，vite-plugin-svg-icons 会扫描你指定目录下的 .svg 文件。
每个 SVG 文件会被转换为一个 <symbol> 元素，并注入到页面的 <svg> 雪碧图中
  
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="icon-user" viewBox="0 0 1024 1024">
      SVG 路径数据  
    </symbol>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
     SVG 路径数据  
     <path ... />
    </symbol>
  </svg> 
在这个图标组件中，通过 <use xlink:href="#icon-user" /> 引用对应的 <symbol>，浏览器会把 symbol 的内容渲染到 <use> 所在的位置。

  假设这个 SVG 图标组件叫 SvgIcon.vue，那么父组件可以这样用:
  <template>
    <div>
        使用用户图标，颜色为红色  
        使用首页图标，颜色继承父元素文字颜色
      <svg-icon icon-class="question" color="red" />
    </div>
  </template>

  <script setup>
  import SvgIcon from '@/components/SvgIcon.vue'
  </script>
-->
  <!-- <svg t="1759798882938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2152" width="128" height="128">
    <path d="M576 64H448v384H64v128h384v384h128V576h384V448H576z" fill="#262626" p-id="2153"></path>
  </svg> -->
</template>

<script>
export default defineComponent({
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    return {
      iconName: computed(() => `#icon-${props.iconClass}`),
      svgClass: computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`;
        }
        return "svg-icon";
      }),
    };
  },
});
</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
  margin-right: 5px;
  margin-left: 5px;
}
</style>
